<template>
  <div v-if="activity">
    <h2>{{ activity.title }}</h2>
    <p>{{ activity.description }}</p>
    <p>Date: {{ activity.date }}</p>
    <p>Location: {{ activity.location }}</p>
  </div>
</template>

<script>
import activities from '@/data/activities';

export default {
  data() {
    return {
      activity: null
    };
  },
  created() {
    this.getActivityById();
  },
  watch: {
    '$route.params.id': 'getActivityById'
  },
  methods: {
    getActivityById() {
      const id = this.$route.params.id;
      this.activity = activities.find(activity => activity.id === parseInt(id));
    }
  }
};
</script>